<template>
  <div class="pagination">
    <!-- 分页器 -->
    <div @click="a">{{ CurrentPage }}</div>
    <div v-if="true">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="goodsListNum"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    // 每一页展示多少条数据
    pageSize: {
      default: 0,
      type: Number
    },
    CurrentPage: {
      default: 0
    }
  },
  data() {
    return {
      // 默认展示第几页 默认为 1  点击分页数字后会改变该值  当路由发生变化时 这里又会重新变为 1
      // 目的是不影响下一个 导航商品 处于第几页
      currentPage: 1
    }
  },
  computed: {
    // 总共有多少条商品数据
    goodsListNum() {
      return Number(this.$store.state.search.goodsListNum) //转换为数字类型
    }
  },
  watch: {
    // 监听路由的信息是否发生变化，如果发生变化，分页为第一页
    // 触发点击导航这里不触发
    $route(newValue, oldValue) {
      this.currentPage = 1 //修改currentPage
      this.show = false //让分页隐藏
      this.$nextTick(() => {
        //重新渲染分页
        this.show = true
      })
    },
    // 监听是否再一次点击了导航

    // 点击导航后 数据分页 重新回到 1
    // 这里逻辑有点复杂 我看京东的官网就是这样做： 假如当前为第三页  在路由不变的情况下，重复点击相同的导航会一直处于第三页，
    // 这样是不行的，无论是路由发生变化还是重复点击导航商品的分页都应该重置  要重新变为 初始值 1
    // 首先vuex不行，因为无法监听 state数据源 我是这样的，
    // 1. 点击导航后 通过自定义事件 告诉 search（带有分页器的组件） 组件 currentPage 的值变为 1
    //    然后 pagination 数据分页组件 通过 props属性 双向绑定 search组件的 currentPage 值
    //    然后监听  watch: {currentPage(newValue, oldValue) {} }   这里的监听对象一定要是 props:['currentPage']初始值
    //    不能是 data: return {currentPage: this.currentPage} 这个返回值
    // 2.  通过自定义事件把 点击数据分页的页数 赋值给 search组件的  currentPage 值 目的是 点击分页后再一次触发数据变化，从而触发事件
    // 4. 点击商品分类属性 重置页数
    // 3. 重新发送请求，将最新的页数发送给服务端

    // 总结：currentPage 是 监听所有数据的变化 1重置页数，其余改变页数
    // 路由发生变化 页数重置为 1
    // 重复点击导航 页数也会重置为 1
    // 点击分页后 例如第 2 页 ，把这个 值变化 赋予 currentPage ，从而再一次触发以下函数 （目的是为了防止只能监听第一次的数据变化）
    // 点击商品的分类属性 页数重置为 1

    // 当 currentPage 发生变化时，说明用户点击了导航
    CurrentPage(newValue, oldValue) {
      let pages = Number(newValue) // 改变后的值 如果是点击导航 1 ， 如果点击分页 就是页数
      this.currentPage = pages //修改currentPage
      this.show = false //让分页隐藏
      this.$nextTick(() => {
        //重新渲染分页
        this.show = true
      })
      // 重新发送请求 告诉服务端 当前为第 几 页
      this.$emit('handleCurrentChange', newValue)
    }
  },
  methods: {
    a() {
      console.log(this.changeCurrentPage)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)

      // 将最新的值传给 search 组件的 currentPage 值  currentPage 值发生变化 会触发监听函数，点击相同导航也可以重置页数
      this.$emit('changeCurrentPage', `${val}`)

      // 当前为第几页 通过自定义事件传给 search 组件 然后告诉服务端
      this.$emit('handleCurrentChange', `${val}`)
    }
  }
}
</script>

<style scoped lang="less">
.pagination {
  margin: 0 auto;
  text-align: center;
}
</style>
